<template>
    <div class="slideTab">
        <div class="slideTabContent" @touchstart="handleTouchStart">
            <slot></slot>
        </div>
        <span class="selectLine" ref="selectLine"></span>
    </div>
</template>
<script>
    export default {
        mounted(){
            let arrs = this.$slots.default;
            arrs.forEach(item=>{
                if(item.elm.nodeType == 1){
                    this.elmWidth = item.elm.offsetWidth;
                    this.elmId.push(item.elm.children[0].id);
                }
            });
            this.selectLineLeft = this.elmWidth/2 - this.$refs.selectLine.offsetWidth/2;
            this.$refs.selectLine.style.left = this.selectLineLeft + "px";
            this.$refs.selectLine.addEventListener('transitionend',function(){
                this.style.width = "1.733333rem";
                this.style.transform = "translateX(0px)"
            })
        },
        data(){
            return {
                elmId:[],
                elmWidth:"",
                selectLineLeft:""
            }
        },
        methods:{
            handleTouchStart(e){
                this.elmId.forEach((item,index)=>{
                    if(item == e.target.id){
                        this.$refs.selectLine.style.width = "100px";
                        this.$refs.selectLine.style.transform = "translateX(-17px)"
                        this.$refs.selectLine.style.left = this.selectLineLeft + this.elmWidth * index + "px"
                    }
                })
            },
        }
    }
</script>